<template>
    <h1>reactive：引⽤类型的数据响应定义</h1>
    <h2>{{ obj }}</h2>
    <button @click="obj={name:'小王',age:88,friends:{name:'星星'}}">点击修改name</button>
    <!-- 无效：因为 reactive绑定的复杂数据类型不能重新赋值-->
    <button @click="obj.friends.name='张三'">点击修改深层属性值</button>
    <button @click="obj.sex='女'">点击新增属性</button>

    <h2>{{ arr }}</h2>
    <button @click="arr=[1,2,3]">点击修改</button>
    <!-- 无效：因为 reactive绑定的复杂数据类型不能重新赋值 -->
    <button @click="arr.push(1,2,3)">点击修改</button>



</template>

<script setup lang='ts'>
import { reactive,watch } from 'vue';

let obj=reactive({
    name:"小米",
    age:18,
    friends:{
        name:"小红"
    }
})

let arr=reactive([]);
console.log(obj);

watch(obj,()=>{
    console.log("objjjjj改变了");
})

</script>

<style scoped>

</style>


<!-- 
    总结1：ref 和 reactive的区别
    1.数据类型不同：ref主要用于定义基本数据类型，也可以用于定义复杂数据类型，如果给ref传入的是一个复杂数据类型，
    那么这个数据就会通过reactive方法将其转为具有更深层次的响应式数据，也就是说本质还是调用了reactive方法。
    reactive只能用于定义复杂数据类型。

    2.访问方式不同：ref函数创建的响应式数据，需要通过.value属性来访问到数据；
    reactive函数创建的响应式数据，可以直接进行访问。

    3.监听方式不同：对ref函数创建的变量进行监听的时候，如果是复杂数据类型需要进行深度监听，
    对reactive函数创建的变量进行监听的时候，可以省略深度监听


    总结2：ref 和 reactive的使用区别
    1.响应一个基础数据类型，选择ref
    2.响应一个复杂数据类型，层级不深，选中ref或者reactive
    3.响应一个复杂数据类型、层级较深，需要深度跟踪，选择reactive


 -->